<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顽石旅游网-搜索</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/search.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
  	<style type="text/css">
  		.topbar{position:relative}
    	.hottel,.haslogin{position:absolute;top:12px;right:50px}
    	.hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
    	.hottel a{color:#666;text-decoration:none}
    	.haslogin{top:45px;right:0}
    	.haslogin p{font-weight:700;float:left;margin-right:30px;font-size:18px}
        
            .pageNum {
                display: flex;
                justify-content: center;
                align-items: center;
                list-style: none;
                padding: 0;
                margin: 20px 0;
            }
            .pageNum li {
                margin: 0 5px;
            }
            .pageNum li a {
                padding: 8px 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                text-decoration: none;
                color: #007bff;
                font-size: 14px;
                display: inline-block;
                min-width: 40px;
                text-align: center;
            }
            .pageNum li a.disabled {
                color: #ccc;
                cursor: not-allowed;
            }
            .pageNum li a.active {
                background-color: #007bff;
                color: #fff;
                border-color: #007bff;
            }
    .search select {
        margin-left: 10px;
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 3px;
        height: 34px; /* 与搜索框高度一致 */
    }
    </style>
</head>
<body>
<!--引入头部-->
<header id="header">
    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">$
                <a href="${pageContext.request.contextPath}/luyou/shouye"><img src="${pageContext.request.contextPath}/images/logo.png" style="height: 60px;" alt=""></a>
            </div>
            <form class="search" action="${pageContext.request.contextPath}/luyou/sousuo">
                <input name="route_name" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off" value="${param.route_name}">
                <select name="column_id" class="form-control">
                    <option value="">全部栏目</option>
                    <c:forEach items="${columns}" var="column">
                        <option value="${column.column_id}" <c:if test="${param.column_id == column.column_id}">selected</c:if>>${column.column_name}</option>
                    </c:forEach>
                </select>
                <input type="submit" value="搜索" class="search-button">
            </form>
            <c:choose>
                <c:when test="${empty user}">
                    <div class="hottel">
                        <a href="${pageContext.request.contextPath}/luyou/login"><p>登录</p></a>
                        <a href="${pageContext.request.contextPath}/luyou/zhuce"><p>注册</p></a>
                    </div>
                </c:when>
                <c:otherwise>
                    <div class="haslogin">
                        <p>欢迎：<a href="${pageContext.request.contextPath}/user/gerenzhongxin">${user.u_name}</a></p>
                        <p><a href="${pageContext.request.contextPath}/user/tuichu">退出登录</a></p>
                    </div>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</header>
    <div class="page_one">
        <div class="contant">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <a href="${pageContext.request.contextPath}/luyou/shouye">首页</a> &gt;
                <a href="${pageContext.request.contextPath}/luyou/sousuo">搜索</a> &gt;
                <span>搜索结果</span>
            </div>
            <div class="xinxi clearfix">
                <div class="left">
                    <div class="header">
                        <span>商品信息</span>
                        <span class="jg">价格</span>
                    </div>
                    <ul>
                        <c:forEach items="${pageInfo.list}" var="route">
                            <li>
                                <div class="img">
                                    <img src="<%=Res.fileUrl%>${route.route_photo}" alt="${route.route_name}" style="max-width: 100%; height: auto;">
                                </div>
                                <div class="text1">
                                    <p>${route.route_name}</p>
                                    <br/>
                                    <p>${route.description}</p>
                                </div>
                                <div class="price">
                                    <p class="price_num">
                                        <span>&yen;</span>
                                        <span>${route.route_price}</span>
                                        <span>起</span>
                                    </p>
                                    <p>
                                        <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${route.route_id}">查看详情</a></p>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                    <div class="page_num_inf">
                        <i></i> 共
                        <span>${pageInfo.pages}</span>页<span>${pageInfo.total}</span>条
                    </div>
                    <!-- 分页导航 -->
                    <div class="pagination">
                        <ul class="pageNum">
                            <!-- 首页 -->
                            <li>
                                <a href="${pageContext.request.contextPath}/luyou/sousuo?currentPage=1&pageSize=${pageInfo.pageSize}&route_name=${param.route_name}&column_id=${param.column_id}">首页</a>
                            </li>
                            <!-- 上一页 -->
                            <li>
                                <c:choose>
                                    <c:when test="${pageInfo.pageNum > 1}">
                                        <a href="${pageContext.request.contextPath}/luyou/sousuo?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}&route_name=${param.route_name}&column_id=${param.column_id}">上一页</a>
                                    </c:when>
                                    <c:otherwise>
                                        <a href="javascript:void(0);" class="disabled">上一页</a>
                                    </c:otherwise>
                                </c:choose>
                            </li>
                            <!-- 页码 -->
                            <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                                <li>
                                    <a href="${pageContext.request.contextPath}/luyou/sousuo?currentPage=${i}&pageSize=${pageInfo.pageSize}&route_name=${param.route_name}&column_id=${param.column_id}" class="${pageInfo.pageNum == i ? 'active' : ''}">${i}</a>
                                </li>
                            </c:forEach>
                            <!-- 下一页 -->
                            <li>
                                <c:choose>
                                    <c:when test="${pageInfo.pageNum < pageInfo.pages}">
                                        <a href="${pageContext.request.contextPath}/luyou/sousuo?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}&route_name=${param.route_name}&column_id=${param.column_id}">下一页</a>
                                    </c:when>
                                    <c:otherwise>
                                        <a href="javascript:void(0);" class="disabled">下一页</a>
                                    </c:otherwise>
                                </c:choose>
                            </li>
                            <!-- 尾页 -->
                            <li>
                                <a href="${pageContext.request.contextPath}/luyou/sousuo?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&route_name=${param.route_name}&column_id=${param.column_id}">尾页</a>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="right">
                    <div class="top">
                        <div class="hot">HOT</div>
                        <span>热门推荐</span>
                    </div>
                    <ul>
                        <c:forEach items="${routes1}" var="route" varStatus="status">
                            <c:if test="${status.index < 5 && route.is_delete == 0}">
                                <li>
                                    <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${route.route_id}">
                                    <div class="left"><img src="<%=Res.fileUrl%>${route.route_photo}" alt="${route.route_name}" style="max-width: 100%; height: auto;"></div>
                                    </a>
                                    <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${route.route_id}">
                                        <div class="right">
                                        <p>${route.route_name}</p>
                                        <p>网付价<span>&yen;<span>${route.route_price}</span>起</span></p>
                                    </div>
                                    </a>
                                </li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--引入头部-->
    <!-- 尾部 start-->
    <footer id="footer">
        
        <div class="company">
            <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
        </div>
    </footer>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/include.js"></script>
</body>

</html>
